實戰演練 - Day3

我們昨天練習了類別選單，學到 grid 改變選單按鈕的數量、grayscale 讓圖片以灰階呈現。
今天練習區塊是搜尋功能，那麼開始今天的練習吧！

今日進度

pc

pad

mobile

核心觀念

圖片

1. 在 Day10 - 為背景增添變化吧！ 有提到插入圖片有兩種方法 img 標籤與 background-image: url(...) 及兩者差異，這裡就不再贅述，這裡用的方法是 img 標籤，這樣才不會切到可愛的黃色羊駝。
2. 製作 header 區塊用了 picture 標籤切換圖片，這裡我們改用 hidden 特性根據不同斷點顯示或隱藏圖片。
3. 當圖片寬度小於瀏覽器寬度，用 w-full 將圖片撐滿。

• hidden
• w-full

<img
  src="./img/banner/banner-mobile.svg"
  alt="搜尋 banner 圖"
  class="w-full md:hidden"
/>
<img
  src="./img/banner/banner-pad.svg"
  alt="搜尋 banner 圖"
  class="hidden w-full md:block lg:hidden"
/>
<img
  src="./img/banner/banner-pc.svg"
  alt="搜尋 banner 圖"
  class="hidden w-full lg:block"
/>

搜尋功能區塊

整體區塊

1. 背景圖片採用 img 標籤本身有空間，中間搜尋區塊要使用定位且整體在中間。
2. 搜尋區塊在 mobile 寬度撐滿並左右推 20px 間距、pad 寬度 300px 而 pc 寬度 50%。
3. 搜尋區塊在 mobile 與上方距離 40px、pad 距離 60px 而 pc 則是置中。

• relative
• absolute
• top / left
• width
• translate
• padding

<div class="relative">
  <div
	 class="absolute top-10 left-1/2 w-full -translate-x-1/2 px-5 md:top-[60px] md:w-[300px] md:px-0 lg:top-1/2 lg:w-1/2 lg:-translate-y-1/2"
  >
    ...
  </div>
</div>

文字

slogan 文字置中且粗度為 500。

• text-center
• font-weight

<h1
  class="... text-center font-medium"
>
</h1>

搜尋列

mobile 與 pad 單個一列，pc 兩個一列且左右間距 20px、上下間距 16px。

• grid、gap

<div class="... grid grid-cols-1 gap-x-5 gap-y-4 lg:grid-cols-2">
  ...
</div>

左邊 input 區塊

1. 調整偽元素字體顏色並取消點擊 input 的預設外框。
2. 搜尋按鈕要使用定位，按鈕的背景顏色為 135 deg 的漸變效果。
3. 放大鏡的 icon 要在整個黃色區塊中間。

• placeholder:

• outline-none

• bg-gradient-135deg（官方沒有 135deg 類名稱，此為自定義名稱）、from-起始顏色、to-結束顏色

  

• absolute

• top / right

• translate

• flex

• justify-center

• items-center

<div class="relative">
  <input
    type="text"
    placeholder="搜尋關鍵字"
    class="... outline-none placeholder:text-gray-100"
  />
  <button
    type="button"
    class="... absolute top-1/2 right-2 -translate-y-1/2 flex items-center justify-center bg-gradient-135deg from-primary to-secondary"
  >
    <img src="..." alt="..." />
  </button>
</div>

右邊 select 區塊

1. 移除 select 預設下拉箭頭並取消點擊 select 的預設外框。
2. 下拉箭頭的圖片要使用定位並取消點擊事件，以免點擊下拉箭頭圖片時 select 失效。

• appearance-none
• outline-none
• relative
• absolute
• top / right
• translate
• pointer-events-none

<div class="relative">
  <select
    class="... appearance-none outline-none"
  >
    <option value="不分縣市">不分縣市</option>
    <option value="臺北市">臺北市</option>
    <option value="新北市">新北市</option>
    <option value="桃園市">桃園市</option>
    <option value="台中市">台中市</option>
  </select>
  <img
    src="..."
    alt="..."
    class="pointer-events-none absolute top-1/2 right-4 -translate-y-1/2"
  />
</div>

檔案連結

• 設計稿
• github repo
• github pages

本日重點

1. 使用 hidden 顯示或隱藏圖片。
2. 圖片寬度小於瀏覽器寬度，用 w-full 將圖片撐滿。
3. 偽元素 placeholder: 後面加上類名稱能直接給予樣式。
4. 漸變效果包含方向、起始顏色、結束顏色。
5. outline-none 能取消 input、select 點擊時的預設外框。
6. appearance-none 可以移除 select 預設的下拉箭頭。
7. 若以圖片替代 select 下拉箭頭，要搭配 pointer-events-none 取消點擊事件。

參考

• Tailwind CSS 官網
• Tailwind CSS - Day08 - 掌握 Position，元素不再亂跑
• Tailwind CSS - Day10 - 為背景增添變化吧！
• Tailwind CSS - Day13 - 寬度、高度
• Tailwind CSS - Day15 - 探索 Flex 的奧妙
• Tailwind CSS - Day16 - 探討網格系統
• Tailwind CSS - Day19 - 全都是假的 - 偽元素